<script setup>
//是否展示登录对话框
import {ref} from "vue";
import Login from "@/components/login/Login.vue";
import Register from "@/components/login/Register.vue";
import RegisterSuccess from "@/components/login/RegisterSuccess.vue";
import {useLoginModalStore} from "@/stores/loginModalStore";
import {storeToRefs} from "pinia";
//登录模态框共享资源的对象
const loginModalStore = useLoginModalStore()
//是否显示登录模态框
const {showLoginModal} = storeToRefs(loginModalStore)

//登录模态框内容(1表示登录、2表示注册、3注册成功)
const loginModalStep = ref(1)
//登录模态框的显示卡片
const showLoginModalCard = computed(() => {
  switch (loginModalStep.value){
    case 1:
      return Login
    case 2:
      return Register
    default:
      return RegisterSuccess
  }

})
//改变登录模态框显示卡片
const changeLoginModalStep = step =>{
  loginModalStep.value =step
}
</script>

<template>
  <n-modal v-model:show="showLoginModal" transform-origin="center" :close-on-esc="false">
    <div style="width: 430px">
      <Transition name="bounce" mode="out-in">
        <component :is="showLoginModalCard" @changeStep="changeLoginModalStep"/>
      </Transition>
    </div>

  </n-modal>
</template>


<style>
/*enter进入时的动画*/
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
/*退出时的动画*/
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>